<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="//unpkg.com/vue/dist/vue.js"></script>		
		<title></title>		
	</head>
	<body>
		<div id="app">
			<div :style="{ fontSize: postFontSize + 'em'}">
				<blog-post
					v-for="post in posts"
					v-bind:key="post.id"
					v-bind:title="post.title"></blog-post>				
			</div>
			<blog-post
				v-for="post in posts"
				v-bind:key="post.id"
				v-bind:title="post.title"
				v-on:enlarge-text="postFontSize += 0.1"></blog-post>
		</div>
	</body>
	<script>
		Vue.component('blog-post', {
			props: ['title'],
			template: '\
				<div class="blog-post">\
					<h3>{{post.title}}</h3>\
					<button v-on:click="$emit('enlarge-text')">\
						Enlarge Text\
					</button>\
					<div v-html="post.content"></div>\
				</div>\
			'
		})
		
		new Vue({
			el: "#app",
			data: {
				posts: [
					{id: 1, title: 'My journey with me'},
					{id: 2, title: 'Blogging with Vue'},
					{id: 3, title: 'Why Vue is so fun'}
				],
				psotFontSize: 1
			}
		})
	</script>
</html>
